<template>
  <div style="float: left;margin-top: 5px">
    <el-form ref="searchRef" :model="searchFormData">
      <el-form-item label="关键词" >
        <el-input  type="text" v-model="searchFormData.keyWord"></el-input>
      </el-form-item>
    </el-form>
  </div>
  <div style="height: 40px;margin-top: 5px;float: left;margin-left: 20px;">
    <el-button @click="searchClick">查询</el-button>
    <el-button @click="resetSearchClick">重置</el-button>
  </div>
  <div style="clear: both"></div>
  <div style="height: calc(100% - 60px);">
    <Table  :show-page="true" ref="tableRef" :show-line-number="true"
            :showCheckBox="false"  :columns="columns" :data="data">
      <template  v-slot:handle="slotProps">
        <el-button  @click.stop="showDialog(slotProps.rowData,slotProps.rowIndex)">特征详情</el-button>
      </template>
    </Table>
  </div>
  <el-dialog title="报文详情" v-model="dialogMessageSpecialVisible" :close-on-click-modal="false" >
    <Table :show-page="true" ref="showMessageSpecialTableRef" :show-line-number="true"
           :showCheckBox="false"  :columns="messageSpecialFields" :data="specialData" >
    </Table>
  </el-dialog>
</template>

<script setup>

import Table from "@/components/plugs/table/Table.vue";
import DialogForm from "@/components/plugs/form/DialogForm.vue";
import {inject, reactive, ref, toRaw} from "vue";
import {FormItemType} from "@/components/plugs/form/DialogFormInterface.js";
import {AXIOS_NAME} from "@/constant/constant.js";
import {ElMessage} from "element-plus";
import {deleteRow, HandleEnum} from "@/utils/utils.ts";

const tableRef = ref(null);
const $axios = inject(AXIOS_NAME);
const searchRef = ref(null);
const showMessageSpecialTableRef = ref(null);
const dialogMessageSpecialVisible = ref(false);

const searchFormData = reactive({
  'keyWord': ''
});

const columns = [
  {field:"networkCardName","desc": "网卡名称"},
  {field:"timeInterval","desc": "时长"},
  {field:"packageNum","desc": "包数"},
  {field:"storageLocation","desc": "存放地址"},
  {field:"showTime","desc": "创建时间"},
  {field:"handle","desc": "操作",isSlot:true,width:150}
];

const messageSpecialFields = [
  {field:"code","desc": "报文编号"},
  {field:"resourceIp","desc": "源IP"},
  {field:"resourcePort","desc": "源端口"},
  {field:"targetIp","desc": "目标IP"},
  {field:"targetPort","desc": "目标端口"},
  {field:"protocol","desc": "协议"},
  {field:"threeProtocol","desc": "三层协议"},
  {field:"byteLength","desc": "字节长度"},
  {field:"showTime","desc": "创建时间"}
]

const specialData = [];
for(let i = 0;i < 10; i++){
  specialData.push({
    "code": "112dsada",
    "resourceIp": "127.0.0.1",
    "resourcePort": "225",
    "targetIp": "127.0.0.1",
    "targetPort": "236",
    "protocol": "Http",
    "threeProtocol": "TCP",
    "byteLength": "1205",
    "showTime": "2025-01-02 12:12:12"
  });
}

let items = [];
items.push({type: FormItemType.INPUT_HIDDEN,label: 'id',name: 'id'});
let editDialogForm = reactive({
  splitCol: 1,
  gutter: 20,
  labelWidth: 115,
  items:items,
  rules:{},
});

const data = [];
for(let i = 0;i < 5;i++){
  data.push({
    "networkCardName": "网卡1",
    "timeInterval": "10s",
    "packageNum": 20,
    "storageLocation": "/data/xxx/nic1.pcap",
    "showTime": "2025-02-01 :12:12:12"
  });
}

const searchClick = () =>{
  tableRef.value.reload(toRaw(searchFormData));
}

const resetSearchClick = () =>{
  for(const  key in searchFormData){
    searchFormData[key] = '';
  }
}

const showDialog = (rowData,rowIndex) => {
  dialogMessageSpecialVisible.value = true;
}
</script>

<style scoped>

</style>